<template>
    <!-- 上 -->
    <div class="type_area">
        <div class="recent">
            <!-- 上 -->
            <div class="auto">
                <div class="time">{{time}}</div>
                <div class="week">{{week}}</div>
                <div class="multi-data">
                    <div class="site_name">策克口岸</div>
                    <div class="login">
                        <button class="del">云平台登录</button>
                    </div>
                </div>
            </div>
            <div class="w">
                <div class="back">
                    <div class="logo">
                        <img src="../assets/img/column4.jpg" class="logo_img" alt="">
                    </div>
                    <div class="btns">
                        <el-link class="btn1" :underline="false">首页</el-link>
                        <el-link class="btn2" :underline="false">新闻</el-link>
                        <el-link class="btn3" :underline="false">互动</el-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date(Date.now()).format("yyyy年MM月dd日"),
      week: new Date().weeks()
    };
  }
};
</script>

<style scoped>
.type_area {
  height: 150px;
  position: relative;
}

.recent {
  /* width: 1300px; */
  height: 30px;
  background-color: #226ebc;
}

.auto {
  width: 1300px;
  height: 30px;
  position: relative;
  margin: auto;
  line-height: 30px;
}

.time {
  width: 130px;
  height: 30px;
  float: left;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.week {
  width: 100px;
  height: 30px;
  float: left;
  margin-left: 20px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.login {
  float: right;
  width: 100px;
  height: 30px;
}

.multi-data {
  float: right;
  width: 350px;
  height: 30px;
}

.del {
  width: 100px;
  height: 25px;
  font-size: 12px;
  background-color: #fff;
  /* line-height: 30px、; */
  text-align: center;
  color: #2f76be;
  border: 0;
}
.site_name {
  float: left;
  /* margin-right: 200px; */
  font-size: 14px;
  color: #fff;
}

.back {
  width: 100%;
  height: 120px;
  background: url("../assets/img/zhong.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.swper_img {
  width: 100%;
  height: 100%;
}

.logo {
  width: 300px;
  height: 80px;
  /* background-color: #666; */
  border: 0;
  z-index: 99999;
  position: relative;
}

.logo_img {
  position: absolute;
  top: 0;
  max-width: 100%;
  max-height: 100%;
}

.left {
  width: 250px;
  height: 80px;
  margin-left: 5%;
  position: absolute;
  background: url("../assets/img/zuo.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: 0;
}

.right {
  /* float: right; */
  position: absolute;
  right: 0;
  /* z-index: 9999; */
  margin-right: 7%;
  width: 300px;
  height: 300px;
  background: url("../assets/img/you.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.btns {
  width: 400px;
  height: 40px;
  /* background-color: #ccc; */
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  transform: translateX(-50%);
}

.btn1 {
  flex: 1;
  background-color: #fff;
  border: 0;
  font-size: 18px;
  /* color: #333 */
}

.btn2 {
  flex: 1;
  background-color: #fff;
  font-size: 18px;
  border: 0;
}

.btn3 {
  flex: 1;
  background-color: #fff;
  font-size: 18px;
  border: 0;
}

</style>


